<template>
	<div class="user-rights">
		<!-- 面包屑 -->
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{path: '/home'}">主页</el-breadcrumb-item>
				<el-breadcrumb-item>权限管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="user-rights-a">
			<!--	搜索框	-->
			<div class="user-rights-search">
				<el-form ref="form" :inline="true" :model="searchForm" label-width="80px" size="medium">
					<el-form-item label="用户名">
						<el-input v-model="searchForm.user_name"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 菜品表格 -->
			<div class="user-rights-table">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="selection" width="55px" align="center">
					</el-table-column>
					<el-table-column prop="user_id" label="用户id" width="100px" sortable>
					</el-table-column>
					<el-table-column prop="user_true_name" label="用户名" width="100px">
					</el-table-column>
					<el-table-column prop="power_distribution" align="center" label="用户权限">
						<template slot-scope="scope">
							<el-tag class="user-rights-tag" v-for="i in scope.row.power_distribution" :type="i.power_id%2 == 1 ? 'primary' : 'success'"
							 disable-transitions size="small">{{i.power.power_name}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="130" align="center">
						<template slot-scope="scope">
							<el-button @click="editClick(scope.row)" type="text"><i class="el-icon-edit"></i> 编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页相关 -->
			<div class="user-rights-page">
				<el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[5,10,15,20]" :current-page="pageNum"
				 :total="total" :page-size="pageSize" @current-change="currentChange">
				</el-pagination>
			</div>
			<!-- 编辑弹出窗 -->
			<div class="user-rights-dialog">
				<el-dialog title="编辑权限" :visible.sync="editDialogVisible" width="640px" top="6vh">
					<div class="user-rights-dialog-from">
						<!-- 中间内容 -->
						<template>
							<el-transfer v-model="hadRights" :data="powerKinds" :props="{key: 'power_id',label: 'power_name'}" :titles="['未有权限', '已有权限']"></el-transfer>
						</template>
					</div>
					<span slot="footer" class="dialog-footer">
						<el-button @click="editDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="editSubmit()">确 定</el-button>
					</span>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import UserRightsService from "@/views/UserRights/UserRightsService";
	export default {
		name: "UserRights",
		data() {
			return {
				searchForm: {
					user_name: ''
				},
				hadRights: [],
				tableData: [{
					user_id: '1',
					user_true_name: 'zzg',
					power_distribution: [{
						power_id: 1,
						power: {
							power_name: '权限1'
						}
					}, ]
				}, ],
				powerKinds: [],
				total: 100,
				pageNum: 1,
				pageSize: 5,
				editDialogVisible: false,
				user_id: null,

			}
		},
		methods: {
			//提交搜索表单
			searchSubmit() {
				this.pageNum = 1;
				this.searchUserRights();
			},
			//编辑
			editClick(row) {
				this.editDialogVisible = true;
				//console.log(row);
				this.user_id = row.user_id;
				this.hadRights = row.power_distribution.map(item => {
					return item.power_id;
				});
				//console.log(this.hadRights);
			},
			//页面跳转
			currentChange(val) {
				this.pageNum = val;
				this.searchUserRights();
			},
			//页面大小改变
			handleSizeChange(val) {
				this.pageSize = val;
				this.pageNum = 1;
				this.searchUserRights();
			},
			editSubmit() {
				this.editDialogVisible = false;
				UserRightsService.editUserRightsService({
					user_id: this.user_id,
					power_arr: this.hadRights
				}, r => {
					if (r.addnum) {
						this.$message({
							type: 'success',
							message: '提交成功!'
						});
					} else {
						this.$message({
							type: 'error',
							message: '提交失败!'
						});
					}
					this.searchUserRights()
				})
			},
			//搜索方法
			searchUserRights() {
				console.log(`搜索ing：用户名：${this.searchForm.user_name}当前页：${this.pageNum}`)
				UserRightsService.searchUserRightsService({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					user_true_name: this.searchForm.user_name
				}, r => {
					// console.log(r.powerdistributionlist)
					if (r.err) {
						this.tableData = [];
						this.total = 0;
					} else {
						this.tableData = r.powerdistributionlist.list;
						this.total = r.powerdistributionlist.total;
					}
				})
			}

		},
		created() {
			UserRightsService.searchAllRightsService({

			}, r => {
				this.powerKinds = r.powerList;
			})
			this.searchForm.user_name = '';
			this.pageNum = 1;
			this.pageSize = 5;
			this.searchUserRights();
		}
	}
</script>

<style lang="less">
	@import '../../style/Common.less';

	.user-rights-a {
		padding: 20px;
	}

	.user-rights-search {
		color: #606266;
		font-weight: bold;
	}

	.user-rights-buttons {
		display: flex;

		>div {
			margin: 0 12px 20px 12px;
		}
	}

	.user-rights-table {}

	.user-rights-page {
		height: 32px;
		margin: 20px 20px 0 0;
		float: right;
	}

	.user-rights-dialog {
		.food-dialog-from {
			padding: 0 20px;
		}
	}

	.hide .el-upload--picture-card {
		display: none;
	}

	.user-rights-tag {
		margin: 5px 5px 5px 5px;
	}
</style>
